var VueLoaderPlugin = require('vue-loader/lib/plugin')
var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var {CleanWebpackPlugin} = require('clean-webpack-plugin')
var webpack = require('webpack')

function resolve (p) {
  return path.resolve(__dirname, p)
}

module.exports = (env, config) => {
  var isDev = config.mode === 'development'
  return {
    entry: {
      app: resolve('./src/main')
    },
    output: {
      path: resolve('./dist'),
      filename: isDev ? '[name].js':'[name].[chunkhash].js'
    },
    resolve: {
      extensions: ['.vue', '.js', '.json'],
      alias: {
        '@design': resolve('./src/design/index.styl'),
        '@pages': resolve('./src/pages'),
        '@components': resolve('./src/components'),
        '@src': resolve('./src'),
        'vue': 'vue/dist/vue.runtime.min'
      },
    },
    devServer: {
      port: 6666,
      overlay: true,
      proxy: {}
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          use: [
            {
              loader: 'vue-loader',
            }
          ]
        },
        {
          test: /\.js$/,
          use: [
            {
              loader: 'babel-loader'
            }
          ]
        },
        {
          test: /\.styl?us/,
          use: [
            {
              loader: 'vue-style-loader',
            },
            {
              loader: 'css-loader',
            },
            {
              loader: 'postcss-loader',
            },
            {
              loader: 'stylus-loader'
            }
          ]
        }
      ],
    },
    plugins: [
      isDev ? () => {} : new CleanWebpackPlugin(),
      !isDev ? () => {} : new webpack.HotModuleReplacementPlugin(),
      new HtmlWebpackPlugin({
        template: resolve('./src/index.html'),
        // filename: isDev ? resolve('./dist/index.html') : resolve('./index.html'),
      }),
      new VueLoaderPlugin(),
    ],
  }
}
